import React, { Component } from 'react'
import store from '../store'
import { NavLink } from 'react-router-dom';

export default class Redux extends Component {
  constructor() {
    super();
    this.state = {
      age: 18,
      num: 0,
      unsubscribe: null
    }
  }
  componentDidMount() {
    // 页面渲染后建立监听，订阅state中数据的变化
    this.state.unsubscribe = store.subscribe((res) => {
      this.setState(res)
    })
    this.setState(store.getState())
  }
  componentWillUnmount() {
    // 卸载时注销监听
    this.state.unsubscribe()
  }
  changeData() {
    // vuex中修改数据 this.$store.dispatch('addNum')
    // 修改数据，通过dispatch触发
    let action = {type: 'numAdd'}
    store.dispatch(action);
    // console.log(store.getState());
    this.setState({
      age: store.getState().age,
      num: store.getState().num
    })
    // 以上是完整的写法，比较麻烦
    // 缩写：  this.setState(store.getState())
  }
  render() {
    // this.$store.state.xxx  vuex中获取数据
    console.log(store.getState()); // redux获取数据
    return (
      <div>
        <p>redux的示例文件</p>
        <button onClick={() => this.changeData()}>修改数据</button>
        <p>购物车数量：{this.state.num}</p>
        <NavLink to="/redux">Redux</NavLink>
      </div>
    )
  }
}
